<!-- list -->
<template>
	 <el-container>
    <!-- 列表头部开始 -->
    <el-header style="text-align: right; font-size: 12px">
      <span>cyw</span>
    </el-header>
    <!-- 列表头部结束 -->
   <el-main>
      <!-- <div style="margin-top: 15px;">
      <el-col :span="4">
        <el-input placeholder="请输入内容" v-model="input5" class="input-with-select">
          <el-button slot="append" icon="el-icon-search"></el-button>
        </el-input>
      </el-col>
      </div> -->
    <!-- table开始 -->
      <el-table :data="tableData.content"  tooltip-effect="dark"  @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" />
        <el-table-column prop="id" label="编号" width="140" />
        <el-table-column prop="name" label="名字" width="120" />
        <el-table-column prop="longitude" label="经度" width="120"/>
        <el-table-column prop="latitude" label="纬度" width="120"/>
        <el-table-column prop="tag" label="标签" />
         <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
    </el-table-column>
      </el-table>
      <!-- table结束 -->
  <div style="margin-top: 20px">
    <el-button @click="handleBatchDelet">批量删除</el-button>
  </div>
    </el-main>
    <!-- 分页工具开始 -->
    <page :total="tableData.totalElements"
           :size="tableData.size"
           @handlePageChange="handlePageChange"
    />
    <!-- 分页工具结束 -->
    <!-- 遮雾层 -->
    <div class="mask" v-if="showModel" />
    <!-- 遮雾层 -->
    <!-- 修改框表单开始 -->
    <el-form ref="form" :model="form" :rules="rules" class="edit-form" v-if="showModel">
        <el-input v-model="form.id" type="hidden"></el-input>
      <el-form-item  label="景区名称" prop="name">
     <el-col :span="12">
        <el-input v-model="form.name"></el-input>
       </el-col>
      </el-form-item>
       <el-form-item label="经纬度" required>
         <el-col :span="4">  
          <el-form-item prop="longitude">
               <el-input v-model.number="form.longitude"  placeholder="输入经度"></el-input>
          </el-form-item>
         </el-col> 
           <el-col class="line" :span="2">-</el-col>
          <el-col :span="4"> 
           <el-form-item prop="latitude">
                <el-input v-model.number=" form.latitude"  placeholder="输入维度"></el-input>
           </el-form-item>
          </el-col>
     </el-form-item> 
      <el-form-item label="标签" prop="tag">
     <el-col :span="12">
        <el-input  v-model="form.tag"></el-input>
       </el-col>
      </el-form-item>
      <el-form-item class="sumbit">
          <el-button type="primary" @click="handleEditSubmit">修改</el-button>
          <el-button @click="handleCanel">取消</el-button>
      </el-form-item>
  </el-form>  
  <!-- 修改框表单结束 -->
</el-container>
</template>

<script>
import axios from 'axios'
import page from './components/page'
import qs from 'qs'   	
export default {
  name: 'list',
  components:{
    page
  },
   data() {
      return {
         tableData:[],//列表数据
         page:1,//请求分页的初始值
         showModel:false,//是否显示修改的表单
         form:{},//修改表单的数据
         //表单验证的规则
          rules: {
         name:[ {required: true, message: '请输入景区名称', trigger: 'blur'} ],
          longitude:[
             {required: true, message: '请输入经度', trigger: 'blur'},
              { type: 'number', message: '请输入数字'}
             // {min: 0, max: 180, message: '输入的经度不在范围内', trigger: 'blur'}
          ],
          latitude:[
             {required: true, message: '请输入维度', trigger: 'blur'},
              { type: 'number', message: '请输入数字'}
             // {min: 0, max: 90, message: '输入的维度不在范围内', trigger: 'blur'}
          ],
          tag:[{required: true, message: '请输入标签', trigger: 'blur'}]
        },
        ids:''//批量删除的id

      }

      },
   created: function() {
   	//console.log('axios',this.axios)
      this.getListinfo()
    },
    methods: {
      /*
       获取列表数据
       page:为从那一页开始
       getListInfoSucc：获取成功后调用的方法
      */
     getListinfo(){
     	axios.get('/api/list?page='+this.page+'&size=50').then(this.getListInfoSucc)
     },
     getListInfoSucc(res){
     	   console.log('res', res.data)
           this.tableData=res.data
     },
     //监听分页的变化
    handlePageChange(val){
    	this.page=val
     	this.getListinfo()
     },
     //单条数据删除
     handleDelete(index, row){
      console.log(index, row);
      axios.get('/api/del?id='+row.id).then(res=>{
        if (res.data=='success') {
            alert('删除成功')
             location.reload()
        }
        if (res.data=='fail') {
            alert('删除失败')
        }
      })
     },
     //点击编辑时，查询这条数据渲染到表单
     handleEdit(index,row){
        axios.get('/api/findRegionById?id='+row.id).then(res=>{
          console.log(res.data)
        this.form=res.data
        this.showModel=true
      })
     },
     //点击取消时的方法
    handleCanel(){
      this.showModel=false
    } ,
    //提交修改
    handleEditSubmit(){
       console.log('list',this.regionData)
      var qs = require('qs')
      axios.post('/api/update', qs.stringify(this.form)).then(function(res) {
           console.log(res)
           if (res.status==200) {
            alert("添加成功")
            //刷新页面
            location.reload()
           }else{
             alert("添加失敗")
           }
           // this.reload()

      })
    },
    //批量删除多选框被选中调用的方法
    handleSelectionChange(val) {
        let ids=''
       for(let i of val){
         ids=ids+i.id+';'
       }
        this.ids=ids
      },
      //批量删除
    handleBatchDelet(){
      console.log('del')
      console.log('ids',this.ids)
      let ids=this.ids
      if (ids=='') {
        alert('请选择删除项')
      }else{
        axios.get('/api/batchDeletRegion?ids='+ids).then(res=>{
          console.log(res.data)
          if (res.data=='success') {
            alert('删除成功')
             location.reload()
        }
        if (res.data=='fail') {
            alert('删除失败')
        }
      })
      }
    }  
  }
}
</script>

<style>
.edit-form{
  width: 500px;
  height: 500px;
 /* background: #000000;*/
  background:#fff; 
  position: fixed;
  left:0; right:0; top:0; bottom:0;
  margin:auto;
  padding: 10px 20px;
  z-index: 1000;
}
.mask{
   width: 100vw;
   height: 100vw;
  background:rgba(0,0,0,0.5);
   position: fixed;
   top: 0;
   left: 0;
   z-index: 1000;
}
 .el-select .el-input {
    width: 100px;
  }
  .input-with-select .el-input-group__prepend {
    background-color: #fff;
  }
</style>


